<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--@elvariable id="viewToken" type="java.lang.String" --%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>查看视图</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/sample.css">
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<!-- 引用BIMFACE的JavaScript显示组件库 -->
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
<script type="text/javascript">
	function saveimg() {
		var canvas = $("#domId canvas").get(0);
		var imgdata = canvas.toDataURL("png");
		imgdata = imgdata.replace('image/png', 'image/octet-stream');
		var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
		save_link.href = imgdata;
		save_link.download = "scene.png";
		var event = document.createEvent('MouseEvents');
		event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		save_link.dispatchEvent(event);
	};
</script>
</head>

<body>
	<div class="header">BIMFACE简单示例</div>
	<div class="tips">第二步：调用服务端API获取ViewToken，并对接JS显示组件打开模型</div>
	<div class="box">
		<div class="viewer" id="domId"></div>
	</div>
	<div class="tips">
		<a href="${pageContext.request.contextPath}/BimFace/upload">重新上传</a> <input type="button" value="保存图片" onclick="saveimg()">
	</div>
	<script type="text/javascript">
		// 指定待显示的模型或图纸（viewToken从服务端获取）
		var viewToken = '${viewToken}';
		var drawableContainer;

		// 初始化显示组件
		var options = new BimfaceSDKLoaderConfig();
		options.viewToken = viewToken;
		//加载SDK
		BimfaceSDKLoader.load(options, successCallback, failureCallback);

		function successCallback(viewMetaData) {
			if (viewMetaData.viewType == "3DView") {
				// 创建WebApplication，直接显示模型或图纸
				var dom4Show = document.getElementById('domId');
				var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
				webAppConfig.domElement = dom4Show;
				var app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
				// 添加待显示的模型
				app.addView(viewToken);

				// 监听添加view完成的事件
				app.addEventListener(Glodon.Bimface.Application.WebApplication3DEvent.ViewAdded, function() {

					// 渲染3D模型
					app.render();
					

					// 从WebApplication获取viewer3D对象
					var viewer = app.getViewer();
					
					//测距配置
					var measureConfig = new Glodon.Bimface.Plugins.Measure.MeasureRayConfig();
					measureConfig.viewer = viewer;
					var measure = new Glodon.Bimface.Plugins.Measure.MeasureRay(measureConfig);
					//射线测距模式开启
			        //measure.switchOn();
				
					//添加外部元素
					var drawableContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
					drawableContainerConfig.viewer = viewer;
					drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableContainerConfig);

					viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ComponentsSelectionChanged, function(componentData) {
						drawableContainer.clear();
						if (componentData && componentData.objectId) {
							var customItemConfig = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
							customItemConfig.content = "<div style='width:100px; height:30px; background-color:#ffcccc'; cursor:point>对象ID:" + componentData.objectId + "</div>";
							customItemConfig.worldPosition = componentData.worldPosition;
							customItemConfig.opacity = 100;
							var customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(customItemConfig);
							customItem.onClick(function() {
								alert("标签被点中了");
							});

							drawableContainer.addItem(customItem);
						}
					});
				});

				// 监听添加view进行中的时间，可获取添加进度
				app.addEventListener(Glodon.Bimface.Application.WebApplication3DEvent.ViewLoading, function(progress) {
					console.log(progress);
				});

			} else {
				alert("当前的视图类型为：" + viewMetaData.viewType);
			}

		}

		function failureCallback(error) {
			console.log(error);
		};
	</script>
</body>
</html>